<template>
  <div class='test-wrap'>
    <el-form :model='ruleForm' :rules='rules' ref='ruleForm'>
      <el-form-item prop='username'>
        <el-input v-model='ruleForm.username' placeholder='请输入用户名'>
          <i slot='prefix' class='el-icon-user'></i>
        </el-input>
      </el-form-item>
      <el-form-item prop='password'>
        <el-input type='password' show-password v-model='ruleForm.password' placeholder='请输入密码'>
          <i slot='prefix' class='el-icon-lock'></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type='primary' style='width:100%' @click=login>登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name:'textlogin',
    props:{
      ruleForm:{
        type:Object,
        required:true
      },
      rules:{
        type:Object,
        required:true
      }
    },
  methods:{
    login(){
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){
          this.$emit('submit')
        }else{
          this.$emit('errhandle')
        }
      })

    }
  }
}
</script>

<style>
.test-wrap{
  margin-top: 30px;
  margin-left: 30px;
  width:200px
}
</style>